<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>TailwindCSS Introduction</title>

		<link rel="stylesheet" href="dist/reset.css">
		<link rel="stylesheet" href="dist/reveal.css">
		<link rel="stylesheet" href="dist/theme/black.css">

		<!-- Theme used for syntax highlighted code -->
		<link rel="stylesheet" href="plugin/highlight/monokai.css">
		<style>
			h1{
				font-size: 4rem !important;
				text-transform: none !important;
			}
			h2{
				text-transform: none !important;
				font-size: 3rem !important;
			}
			.cn {
				color: rgb(205, 103, 103) !important;
			}
			.lao {
				color: rgb(83, 132, 202) !important;
			}
			p.lao {	
				text-align: left !important;
			}
			p {
				text-align: justify !important;
			}
			.rem-2{
				font-size: 2rem !important;
			}
			.rem-1\.5{
				font-size: 1.5rem !important;
			}
			
		</style>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section>
					<h1>Introduction to TailwindCSS</h1>
					<h2 class="cn">TailwindCSS 介绍</h2>
					<h2 class="lao">ການແນະນໍາ TaiwindCSS</h2>
				</section>
				<section>
					<p>TailwindCSS is a utility-first CSS framework.</p>
					<p class="cn">TailwindCSS 是一个工具优先的 CSS 框架。</p>
					<p class="lao">TailwindCSSແມ່ນໂຄງສ້າງຫລືໂຄງປະກອບCSSປະເພດໜຶ່ງທີ່ເປັນເຄື່ອງມືມີບູລິມະສິດ.</p>
				</section>
				<section>
					<p class="rem-2">The meaning of CSS framework: In a CSS style file, many CSS classes are predefined. Web developers can directly use its classes to determine the style of document elements as long as they introduce this style file.</p>
					<p class="cn rem-1.5">CSS 框架的含义：在一个CSS样式文件中，预先了定义许多 CSS 的类，网页开发者只要引入这个样式文件，就可以直接使用它的类来决定文档元素的风格。</p>
					<p class="lao rem-2">ຄວາມຫມາຍຂອງໂຄງສ້າງCSS: ໃນໄຟລ໌ແບບຢ່າງcssອັນໃດອັນໜຶ່ງ, ໄດ້ກໍານົດclassຂອງCSSຢ່າງລ່ວງຫນ້າ, ຜູ້ພັດທະນາເວັບພຽງແຕ່ຕ້ອງການນໍາເຂົ້າໄຟລ໌ແບບຢ່າງອັນນີ້ມາ,ກໍ່ສາມາດນໍາໃຊ້classຂອງມັນໂດຍກົງ ເພື່ອມາຕັດສິນໃຈຮູບແບບຂອງອົງປະກອບໂດ່ຄີ້ວແມັດ.</p>					
				</section>
				<section>
					<p style="font-size: 2rem;">Why use CSS frameworks? Using a CSS framework can greatly reduce the workload of web developers writing CSS code, thereby improving development efficiency.</p>
					<p style="font-size: 1.5rem;"  class="cn">为什么要使用 CSS 框架？使用 CSS 框架可以大大减轻网页开发者编写 CSS 代码的工作量，从而提高开发效率。</p>
					<p class="lao rem-2">ເປັນຫຍັງຕ້ອງນໍາໃຊ້ໂຄງສ້າງCSS?ການໃຊ້ໂຄງສ້າງCSSສາມາດຊ່ວຍຫລຸດລົງຈໍານວນວຽກງານຂອງຜູ້ພັດທະນາເວັບໄດ້ໃນການຂຽນເລກລະຫັດ CSS, ຍົກສູງປະສິດທິພາບການພັດທະນາ.</p>
				</section>
				<section>
					<p class="rem-2">For example: In a file called beauty-css.css, there is the following definition:</p>
					<p class="cn rem-1.5">例如：在一个叫做 beauty.css 的文件中，有以下定义：</p>
					<p class="lao rem-2">ຕົວຢ່າງ: ໃນໄຟລ໌ທີ່ເອີ້ນວ່າ beauty.CSS, ມີຄໍານິຍາມດັ່ງຕໍ່ໄປນີ້:</p>
					<pre>
						<code data-trim data-noescape>
	...

	.btn-add-to-cart {
		display: inline-block;
		padding: 5px 10px;
		border-radius: 5px;
	}
	...
						</code>
					</pre>
				</section>
				<section>
					<p class="rem-2">In the web page file, as long as the beauty.css file is introduced, the btn-add-to-cart class can be used directly.</p>
					<p class="cn rem-1.5">在网页文件中，只要引入 beauty.css 文件，就可以直接使用 btn-add-to-cart 类了。</p>
					<p class="lao rem-2">ໃນໄຟລ໌ຫນ້າເວັບ, ພຽງແຕ່ຕ້ອງການນໍາເຂົ້າໄຟລ໌beauty.cssມາ, ກໍ່ສາມາດນໍາໃຊ້classຂອງbtn-add-to-cartໂດຍກົງເລີຍ.</p>
					<pre><code data-trim data-line-numbers="all|3,8|5,6|9,13|11">
						&lt;!doctype html&gt;
						&lt;html&gt;
							&lt;head&gt;
								...
								&lt;link rel="stylesheet" href="/path/to/beauty.css"&gt; 
								<!-- or link to a CDN address-->  
								...
							&lt;/head&gt;
							&lt;body&gt;
								...
								&lt;a href="#" class="btn-add-to-cart"&gt;Add To Cart&lt;/a&gt;
								...
							&lt;/body&gt;
						&lt;/html&gt;
					</code></pre>
				</section>
				<section>
					<p class="rem-2">There are two main types of CSS frameworks: One type is the component type, which provides class definitions that contain multiple CSS properties. Another type is utility classes, which provide a large number of classes that usually only contain a CSS property and its value.</p>
					<p class="cn rem-1.5">CSS 框架主要有两种类型：一种类型为组件类型，它提供的类定义中包含了多个 CSS 的属性。另一种类型为工具类，它提供了大量的类，这些类通常只包含一个 CSS 属性及其取值。</p>
					<p class="lao rem-2">ໂຄງສ້າງCSSຕົ້ນຕໍມີສອງປະເພດ:ປະເພດທີ່ຫນຶ່ງແມ່ນປະເພດອົງປະກອບ, ເຊິ່ງໄດ້ສະຫນອງຄໍານິຍາມclassທີ່ມີລັກສະນະCSSຫຼາຍອັນ. ປະເພດທີ່ສອງແມ່ນປະເພດເຄື່ອງມື, ເຊິ່ງໄດ້ສະຫນອງclassຈໍານວນຫຼາຍ, ປົກກະຕິ classເຫລົ່ານີ້ພຽງແຕ່ມີລັກສະນະCSSດຽວ ແລະຕົວເລກກໍານົດດຽວຂອງມັນ.</p>
				</section>
				<section>
					<p class="rem-1.5">TailwindCSS is a utility CSS framework that uses a class to control a CSS property. In this way, developers can have precise control over the layout and style of elements, making it easier to develop uniquely styled web pages. On the contrary, Bootstrap is a component CSS framework that uses a class to predefine the styles of many elements such as buttons, input boxes, etc. Therefore, web pages using the same component CSS framework will have the same style.</p>
					<p class="cn rem-1.5">TailwindCSS 是工具类型的 CSS 框架，以一个类来控制一个 CSS 属性。这样，开发者可以对元素的布局和样式做精确控制，便于开发出独特样式的网页。相反，Bootstrap 是组件类型的 CSS 框架，它用一个类预先定义了许多元素如按钮、输入框等的样式，因此，使用了同一个组件类型的 CSS 框架的网页，它们的风格看起来都一样。</p>
					<p class="lao rem-2">Tailwind CSS ແມ່ນໂຄງສ້າງCSS ປະເພດໜຶ່ງທີ່ແບບເຄື່ອງມື,  ເຊິ່ງໃຊ້classອັນໜຶ່ງມາຄວບຄຸມລັກສະນະCSSອັນໜຶ່ງ. ດ້ວຍວິທີນີ້, ຜູ້ພັດທະນາສາມາດມີການຄວບຄຸມທີ່ຊັດເຈນຕໍ່ແບບຢ່າງ ແລະ ການຈັດວາງຂອງອົງປະກອບ, ເພື່ອພັດທະນາເວັບທີ່ມີຮູບແບບທີ່ເປັນເອກະລັກພິເສດ. ກົງກັນຂ້າມ, Bootstrap ແມ່ນໂຄງສ້າງCSSແບບອົງປະກອບ, ມັນໃຊ້classອັນໜຶ່ງມາກໍານົດແບບຢ່າງຂອງອົງປະກອບຢ່າງຫຼ່ວງໜ້າ  ເຊັ່ນປຸ່ມກົດ, ຂອບການຂຽນໃສ່ແລະອື່ນໆ. ດັ່ງນັ້ນ, ຫນ້າເວັບທີ່ໃຊ້ໂຄງສ້າງCSS ປະເພດດຽວກັນຈະມີຮູບແບບທີ່ຄ້າຍຄືກັນ.</p>
				</section>
				<section>
					<p class="rem-2">The official website of TailwindCSS</p>
					<p class="cn rem-1.5">TailwindCSS 的官方网址</p>
					<p class="lao rem-2">ທີ່ເວັບໄຊທ໌ທາງການຂອງTaiwindCSS
					</p>
					<a href="https://tailwindcss.com/" target="_blank">https://tailwindcss.com/</a>
				</section>
				<section>
					<p class="rem-2">When using TailwindCSS, you can search for the class name corresponding to the CSS property on its official site. For example, if you search for font-size, you can see many detailed definitions of class names such as text-sm, text-lg, etc.</p>
					<p class="cn rem-1.5">在使用 TailwindCSS 的过程中，可在它的官方站点搜索 CSS 属性对应的类名。如：搜索 font-size，可看到许多诸如 text-sm, text-lg 等的类名的详细定义。</p>
					<p class="lao rem-2">ເມື່ອໃຊ້TailwindCSS,ເຮົາສາມາດຄົ້ນຫາຊື່classທີ່ກົງກັບລັກສະນະCSSຢູ່ໃນເວັບໄຊທ໌ທາງການຂອງມັນ. ຕົວຢ່າງ: ຄົ້ນຫາfont-size, ແລ້ວຈະສາມາດເຫັນຄໍານິຍາມທີ່ລະອຽດຂອງຊື່classຫລາຍ ເຊັ່ນ text-sm, text-lgແລະອື່ນໆ.</p>
				</section>
				<section>
					Coding Time!
				</section>
			</div>
		</div>

		<script src="dist/reveal.js"></script>
		<script src="plugin/notes/notes.js"></script>
		<script src="plugin/markdown/markdown.js"></script>
		<script src="plugin/highlight/highlight.js"></script>
		<script>
			// More info about initialization & config:
			// - https://revealjs.com/initialization/
			// - https://revealjs.com/config/
			Reveal.initialize({
				hash: true,

				// Learn about plugins: https://revealjs.com/plugins/
				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
			});
		</script>
	</body>
</html>
